<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>--%>

<c:set var="title" value="商店管理"/>
<%@include file="common/adminHeader.jsp" %>
<c:set var="light" value="6"/>
<%@include file="common/adminNavigator.jsp" %>

<style>
    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 100;
    }

    /*.shop_bottom {
        position: absolute;
        bottom: -251px;
        right: 250px;
    }*/

    /*.shop_top{
        position: absolute;
        top: 190px;
        right: 250px;
    }*/

    .shop_border {
        /*border: 3px solid #ffcbcb;*/
        margin: 8px;
    }

    .col-xs-1 {
        margin-top: 6px;
        margin-left: 50px;
    }

    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 100;
        margin-top: 10px;
    }

    .shop_top_box {
        text-align: center;
    }

    .col-xs-5 {
        margin-left: 49px;
    }

    .myshop_container {
        background: url('render/images/shop_manager01.jpg') no-repeat;
        background-size: 100% 100%;
    }
    .red{
        color:red;
        font-size: 16px;
    }
</style>
<%--style="background: #efefef;"--%>
<div class="container myshop_container">
    <form class="form-horizontal shop_border">
<%--        <h4 for="shop_main_recommend">头部/左侧</h4>--%>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <label for="shop_name" class="red">商铺名字</label><br>
                    <input type="text" class="form-control" id="shop_name" placeholder="文本输入" value="${shop.shop_name}"><br>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-5">
                    <label for="shop_open_time">营业时间</label><br>
                    <textarea class="form-control input-sm Test_1" id="shop_open_time" rows="5">${shop.shop_open_time}</textarea>
                </div>
                <div class="col-xs-5">
                    <label for="shop_introduce">本站介绍</label><br>
                    <textarea class="form-control input-sm Test_1" id="shop_introduce" rows="5">${shop.shop_introduce}</textarea>
                </div><br>
            </div>
        </div>
        <br>
        <div class="shop_top_box">
            <button type="button" class="btn btn-success shop_top">保存</button>
        </div>
        <br><br><br>
    </form>

    <form class="form-horizontal shop_border">
<%--        <h4 for="shop_main_recommend">右侧</h4>--%>
        <div class="container">
            <label for="shop_main_recommend" class="red">本周主打</label><br>
            <div class="form-group" id="shop_main_recommend">
                <div class="col-xs-2">
                    <%--设置该商铺全部分类，onChange事件触发改变第二个关联事件--%>
                    <select class="form-control" id="shop_main_recommend_category_id" name="shop_main_recommend_category_id">
                        <c:if test="${!empty categories}">
                            <option value='' selected disabled>请选择</option>
                            <c:forEach items="${categories}" var="Categories">
                                <option value="${Categories.parent_id}">${Categories.name}</option>
                            </c:forEach>
                        </c:if>
                        <c:if test="${empty categories}">
                            <option value="0" selected disabled>无分类</option>
                        </c:if>
                    </select>
                </div>
                <div class="col-xs-2">
                    <select class="form-control" id="shop_main_recommend_product_id">
                        <c:if test="${!empty products}">
                            <option value="1" selected disabled>请选择</option>
                        </c:if>
                        <c:if test="${empty products}">
                            <option value="0" selected disabled>无商品</option>
                        </c:if>
                    </select>
                </div>
            </div>

            <label>特价推荐（推荐一、推荐二）</label>
            <br>
            <div class="form-group">
                <label class="col-xs-1 red">推荐一：</label>
                <div class="col-xs-2">
                    <select class="form-control" id="shop_special_recommend_category_one" name="shop_special_recommend_category_one">
                        <c:if test="${!empty categories}">
                            <option value='' selected disabled>请选择</option>
                            <c:forEach items="${categories}" var="Categories">
                                <option value="${Categories.parent_id}">${Categories.name}</option>
                            </c:forEach>
                        </c:if>
                        <c:if test="${empty categories}">
                            <option value="0" selected disabled>无分类</option>
                        </c:if>
                    </select>
                </div>
                <div class="col-xs-2">
                    <select class="form-control" id="shop_special_recommend_product_one">
                        <c:if test="${!empty products}">
                            <option value="1" selected disabled>请选择</option>
                        </c:if>
                        <c:if test="${empty products}">
                            <option value="0" selected disabled>无商品</option>
                        </c:if>
                    </select>
                </div>
                <label class="col-xs-1 red">推荐二：</label>
                <div class="col-xs-2">
                    <select class="form-control" id="shop_special_recommend_category_two" name="shop_special_recommend_category_two">
                        <c:if test="${!empty categories}">
                            <option value='' selected disabled>请选择</option>
                            <c:forEach items="${categories}" var="Categories">
                                <option value="${Categories.parent_id}">${Categories.name}</option>
                            </c:forEach>
                        </c:if>
                        <c:if test="${empty categories}">
                            <option value="0">无分类</option>
                        </c:if>
                    </select>
                </div>
                <div class="col-xs-2">
                    <%--查询该店铺分类信息、再查询该店铺商品--%>
                    <select class="form-control" id="shop_special_recommend_product_two">
                        <c:if test="${!empty products}">
                            <option value="1" selected disabled>请选择</option>
                        </c:if>
                        <c:if test="${empty products}">
                            <option value="0" selected disabled>无商品</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label for="shop_name" class="red">手机号</label>
                    <input type="text" class="form-control" id="phone" placeholder="输入手机号" value="${shop.phone}">
                </div>
                <div class="col-md-3">
                    <label for="shop_name" class="red">邮箱</label>
                    <input type="text" class="form-control" id="email" placeholder="输入邮箱" value="${shop.email}">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-4">
                    <label for="shop_notice">近期公告</label><br>
                    <textarea class="form-control input-sm Test_1" id="shop_notice" rows="5">${shop.shop_notice}</textarea>
                </div>
            </div>
        </div>
        <br>
        <div class="shop_top_box">
            <button type="button" class="btn btn-success shop_bottom">保存</button>
        </div>
        <br><br><br>
    </form>
</div>
<%@include file="common/adminFooter.jsp" %>

<script type="text/javascript" src="render/js/stringLimit.js"></script>
<script>
    $(function () {

        $("select[name='shop_main_recommend_category_id']").change(function(){
            var element="shop_main_recommend_product_id";
            getLevel2(this.value,element)
        });

        $("select[name='shop_special_recommend_category_one']").change(function(){
            var element="shop_special_recommend_product_one";
            getLevel2(this.value,element)
        });

        $("select[name='shop_special_recommend_category_two']").change(function(){
            var element="shop_special_recommend_product_two";
            getLevel2(this.value,element)
        });

        //后台获取的二级类别数据
        var number = ${products.size()};

        var arr_id = new Array();
        var arr_category = new Array();
        var arr_name = new Array();
        <c:forEach items="${products}" var="product">
            arr_id.push("${product.id}"); //js中可以使用此标签，将EL表达式中的值push到数组中
            arr_category.push("${product.category_id}"); //js中可以使用此标签，将EL表达式中的值push到数组中
            arr_name.push("${product.name}"); //js中可以使用此标签，将EL表达式中的值push到数组中
        </c:forEach>


        //选择第一项
        function getLevel2(level1,element){
            var options="";
            //回填的二级类别值
            <%--var levell2=${categories.evel2}+"";--%>
            $("#"+element).empty();
            // options+="<option value=''>请选择</option>";
            //遍历二级类别数据，把parentId为level1的数据动态赋值到option中
            for(var i=0;i<number;i++){
                var id=arr_id[i];
                var category_id=arr_category[i];
                var name=arr_name[i];
                if(parseInt(category_id) == parseInt(level1)){
                    options+="<option selected='true' value="+id+">"+name+"</option>";
                }
            }

            $("#"+element).append(options);
        }

        $('.shop_top').click(function () {
            $.ajax({
                type: "post",
                url: "/render/shopManager/updateByShopId/",
                data: {
                    'shop_name':$('#shop_name').val(),
                    'shop_open_time':$('#shop_open_time').val(),
                    'shop_introduce':$('#shop_introduce').val()
                },
                success: function (json) {
                    $.alert.ajaxSuccess(json);
                }
            });
        });

        $('.shop_bottom').click(function () {
            if ($('#shop_main_recommend_product_id').val()==null){
                $.alert.error("本周主打不能为空");
                return;
            }
            if ($('#shop_special_recommend_product_one').val()==null){
                $.alert.error("推荐一不能为空");
                return;
            }
            if ($('#shop_special_recommend_product_two').val()==null){
                $.alert.error("推荐二不能为空");
                return;
            }
            $.ajax({
                type: "post",
                url: "/render/shopManager/updateByShopId/",
                data: {
                    'shop_main_recommend':$('#shop_main_recommend_product_id').val(),
                    'shop_special_recommend_one':$('#shop_special_recommend_product_one').val(),
                    'shop_special_recommend_two':$('#shop_special_recommend_product_two').val(),
                    'shop_notice':$('#shop_notice').val(),
                    'phone':$('#phone').val(),
                    'email':$('#email').val()
                },
                success: function (json) {
                    $.alert.ajaxSuccess(json);
                }
            });
        });
    })
</script>


<%--                            <c:forEach items="${products}" var="product">--%>
<%--                            </c:forEach>--%>